<template>
    <block v-if="scene == 1154">
    	<pyq-open-chunk></pyq-open-chunk>
    </block>
    <block v-else>
        <view class="page bg bg-fff">
            <u-form :model="form" ref="uForm" label-width="200">
                <u-form-item label="购房性质" v-if="houseNature.length > 0">
                    <picker mode="selector" :range="houseNature" range-key="text" :value="currNature" @change="actionSheetCallback">
                        <view class="valueWrap flex">
                            <text class="bodyTxt col-3e right-5">{{houseNature[currNature].text}}</text>
                            <u-icon name="arrow-right" color="#8A8A8A" size="14"></u-icon>
                        </view>
                    </picker>
                </u-form-item>

                <u-form-item label="借贷家庭" v-if="familyList.length > 0">
                    <picker mode="selector" :range="familyList" range-key="text" :value="currFamily" @change="familyCallback">
                        <view class="valueWrap flex">
                            <text class="bodyTxt col-3e right-5">{{familyList[currFamily].text}}</text>
                            <u-icon name="arrow-right" color="#8A8A8A" size="14"></u-icon>
                        </view>
                    </picker>
                </u-form-item>

                <up-form-item label="二星级以上绿色建筑住房">
                    <view class="valueWrap flex">
                        <up-switch class="switchBtn" slot="right" active-color="#007235"
                            v-model="form.isGreenBuilding"></up-switch>
                    </view>
                </up-form-item>
            </u-form>
            <view class="submitBtn bg-theme col-fff font15" @click="submit">开始计算</view>
            <view class="tips font12">
                注：
                <view class="top-5">1.购买二星级及以上新建绿色建筑住房公积金(含补充)最高贷款额度上浮15%。</view>
                <view class="top-5">2.本计算结果仅供参考。</view>
            </view>
            <share-btn :display="scrollAnimate"></share-btn>
        </view>
    </block>
</template>

<script>
    import { mapState, mapActions } from 'pinia';
    import { useConfigStore, useUserInfoStore } from '@/store/index';
    import { isBoolean } from '@/common/common';
    // import { dispatchClient } from '@/common/api-adviser';
    export default {
        data() {
            return {
                form: {
                    nature: '首套',
                    houseIndex: 1,
                    family: '个人',
                    familyIndex: 1,
                    isGreenBuilding: false
                },
                currNature: 0,
                houseNature: [{
                    text: '首套房',
                    value: 1
                },{
                    text: '二套房',
                    value: 2
                }],
                currFamily: 0,
                familyList: [{
                    text: '个人',
                    value: 1
                },{
                    text: '家庭',
                    value: 2
                }, {
                    text: '多子女家庭',
                    value: 3
                }],
                scrollAnimate: false,
                productId: '',
                title: '',
                share: false,
                start_time: 0
            }
        },
        computed:{
            ...mapState(useConfigStore, ['scene']),
            ...mapState(useUserInfoStore, ['userInfo'])
        },
        onShareAppMessage(res) {
            return {
                title: `公积金额度查询，点击查看详情`,
                path: `/pages/tools/calculator/accumulate-limit-query?productId=${this.productId}&title=${this.title}&puid=${this.userInfo.id}&share=true&prepage=公积金额度查询-${this.productId}-${this.title}`,
            }
        },
        onShareTimeline() {
            return {
                title: `公积金额度查询，点击查看详情`,
                query: `productId=${this.productId}&title=${this.title}&puid=${this.userInfo.id}&share=true&prepage=公积金额度查询-${this.productId}-${this.title}`
            }
        },
        onLoad(options) {
            const that = this;
            let { productId='', title='', puid='', share=false } = options;
            
            //朋友圈进入小程序快照场景
            if(this.scene == 1154) return;
            
            this.productId = productId&&productId!=='undefined'?productId:'';
            this.title = title&&title!=='undefined'?title:'';
            this.share = isBoolean(share);
            this.start_time = (new Date()).getTime();
            
            if(puid&&puid!=='undefined') {
                this.setPuid(puid)
            }
            uni.$check_and_login(function () {
                //绑定客户
                // dispatchClient({
                //     share: that.share,
                //     puid: puid,
                //     pid: that.productId
                // });
            })
        },
        
        onPageScroll() {
            const that = this;
            that.scrollAnimate = true;
            this.$u.debounce(function() {
                that.scrollAnimate = false;
            }, 500);
        },
        methods:{
            ...mapActions(useConfigStore, ['setPuid']),
            
            // 点击购房性质回调
            actionSheetCallback(e) {
                const index = e.detail.value;
                this.currNature = index;
                this.form.nature = this.houseNature[index].text;
                this.form.houseIndex = this.houseNature[index].value;
            },

            // 点击借贷家庭回调
            familyCallback(e){
                const index = e.detail.value;
                this.currFamily = index;
                this.form.family = this.familyList[index].text;
                this.form.familyIndex = this.familyList[index].value;
            },

            // 提交
            submit() {
                uni.navigateTo({
                    url: `/pages/tools/calculator/accumulate-query-result?houseIndex=${this.currNature}&familyIndex=${this.currFamily}&isGreenBuilding=${this.form.isGreenBuilding}`
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .page{
        padding: 0rpx 30rpx;
        min-height: 100vh;
        overflow: hidden;
        line-height: 1;
        .valueWrap{
            justify-content: flex-end;
        }
        .submitBtn{
            height: 80rpx;
            line-height: 80rpx;
            border-radius: 10rpx;
            margin-top: 70rpx;
            text-align: center;
        }
        .tips{
            margin-top: 40rpx;
            line-height: 1.5;
        }
    }
</style>
